<template>
  <div class="xiang" :style="{ backgroundImage: `url(${ shopinfo.info && shopinfo.info.poi_back_pic_url})`}">
    <div class="hang">
        <div class="iconfont icon-xiangzuo"></div>
    <div class="di">
      <span class="iconfont icon-gengduo"></span>
      <span class="gang">|</span>
      <span class="iconfont icon-iconfontcolor96"></span>
    </div>
    </div>
    <div class="hang2">
        <img class="logo" :src="shopinfo.info && shopinfo.info.picUrl" alt="">
        <span class="smin">{{(shopinfo.info && shopinfo.info.name)}}</span>
    </div>
    <div class="hang3">
    <span class="iconfont icon-fangdajing">搜索</span>
    <span @click="handclick(index)" v-for="(item,index) in list" :key="index" :class="{active:xiabiao==index}">{{item.text}}</span>
  </div>
  <div class="xuan">
    <div class="left">
        <div @click="handlist(index)" v-for="(item,index) in list2" :key="index" :class="{active:xiabiao2==index}">{{item.text}}</div>
    </div>
    <div class="right">
        <div class="zi">热销</div>
        <div class="ran" v-for="(ite,inde) in list3" :key="inde">
            <div class="dig"><img :src="ite.pic" alt=""></div>
            <div class="nei">
                <div class="h1">{{ite.text}}</div>
                <div class="h2">{{ite.decs}}</div>
                <div class="h3">
                    <span class="sp1">¥{{ite.jia}}</span>
                    <span class="sp">+</span>
                </div>
            </div>
        </div>
    </div>
  </div>
  </div>
</template>

<script>
import { shop_shopinfo } from "@/api";
import tu1 from '../assets/vuejs作业_03.gif'
import tu2 from '../assets/day04---vuejs作业_06.gif'
import tu3 from '../assets/day04---vuejs作业_08.gif'
import tu4 from '../assets/day04---vuejs作业_10.gif'
export default {
  data() {
    return {
        xiabiao:0,
      shopinfo: {},
      list:[
            {id:1,text:'点餐'},
            {id:2,text:'评价4.5'},
            {id:3,text:'商家'},
        ],
        list2:[
            {id:1,text:'热销'},
            {id:2,text:'优惠'},
            {id:3,text:'三文鱼'},
            {id:4,text:'刺身'},
            {id:5,text:'年货礼品区'},
            {id:6,text:'野生大对虾'},
            {id:7,text:'冻货区'},
            {id:8,text:'贝壳螺类'},
            {id:9,text:'鲜虾活鱼'},
        ],
        list3:[
            {id:1,pic:tu1,text:'却威三文鱼刺身~薄片',decs:'国千三文骨中段。口M导题,富含.月售的0研姆存率1心OP',jia:45},
            {id:2,pic:tu2,text:'国产生蚝-剌身',decs:'每赀一民广东阁江生蠕。个大向职,日售的研好存率C05',jia:8},
            {id:3,pic:tu3,text:'却威纯鲜三文鱼-厚片',decs:'百好之百当天空迥白送。面钧晋皮导.月营3份好评率100R6',jia:54.5},
            {id:4,pic:tu4,text:'北极甜虾',decs:'每份30只',jia:45}
        ],
        xiabiao2:0
    };
  },
  mounted() {
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      console.log(res.data);
      if(res.data.code==200){
        this.shopinfo=res.data.shopinfo
      }else{
        alert('res.data.msg')
        this.$router.go(-1)
      }
    });
  },
  methods:{
        handclick(index){
            this.xiabiao=index
        },
        handlist(index){
        this.xiabiao2=index
    }
    }
}

</script>

<style scoped>
.xiang {
  
  height: 200px;
  line-height: 60px;
  padding: 10px;
}
.hang{
    display: flex;
  justify-content: space-between;
}
.hang2 img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.hang .iconfont {
  font-size: 25px;
  margin: 0 10px;
  color: #138fe9;
}
.di {
  width: 100px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #eee;
  line-height: 40px;
  text-align: center;
  margin-top: 10px;
}
.gang {
  font-size: 20px;
  margin-bottom: 10px;
  color: #eee;
}
.smin{
    font-size: 16px;
    color: white;
    font-weight: bold;
}
.hang3{
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    padding: 10px;
    color: white;
}
.hang3 span:nth-child(1){
    display: inline-block;
    width: 100px;
    height: 40px;
    border-radius: 40px;
    background-color: rgba(235, 233, 233, 0.267);
    text-align: center;
    line-height: 40px;
}
.hang3 span{
    margin-right: 20px;
}
.hang3 span.active{
    display: inline-block;
    color: #138fe9;
    border-bottom: 2px solid #138fe9;
    height: 40px;
    line-height: 40px;
}
.xuan{
    display: flex;
    padding: 0 20px;
}
.left{
    width: 90px;
    text-align: center;
}
.active{
    background-color: #eee;
    color: red;
}
.left div{
    height: 60px;
    line-height: 60px;
}
.zi{
    font-size:20px ;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
}
.right{
    flex: 1;
}
.ran{
    display: flex;
    height: 100px;
    margin: 20px 0;
}
.h1{
    font-weight: bold;
}
.h2{
    font-size: 12px;
    color: rgb(116, 112, 112);
    margin: 10px 0;
}
.nei{
    flex: 1;
}
.dig{
width: 100px;
height: 100px;
}
img{
 width: 100%;
}
.sp{
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    background-color: blue;
    font-size: 20px;
    font-weight: bold;
    color: white;
    float: right;
}
.sp1{
    float: left;
    color: red;
}
</style>